<template>
	<div class="left-box">
		<div class="heade-wrapper">
			<a-input-group compact>
				<business-account-list
					v-model="orgId"
					panel="Node"
					:accountId="selectAccountId"
					@change="selectAccountIdChangeHandle"
					class="heade-left-box"
				/>
				<a-input-search
					class="heade-right-box"
					:placeholder="this.$i18n('selectPeople.input',this.$i18n('org.node.label'))"
					v-model.trim="searchValue"
					@search="roleSearchHandle"
				>
				</a-input-search>
			</a-input-group>
		</div>

		<top-bottom-layout class="content-wrapper">
			<template #top>
				<scroll-list
					panel="Node"
					command="nodeList"
					ref="list"
					disabledProp="canSelectd"
					:initSearchValue="listSearchCondition"
					:singleAndMult="true"
					:checkAllShow="false"
					iconType="cap-icon-alternative-post"
					@toCheckValueClickProp="getListValueClickPropHandle"
				/>
			</template>
			<template #middle></template>
			<template #bottom>
				<scroll-list
					panel="Node"
					command="roleList"
					ref="roleList"
					:otherProps="roleOtherProps"
					:titleProps="roleTitleProps"
					:firstLoadSearch="roleFirstLoad"
					:singleAndMult="true"
					:checkBoxStrictly="true"
					iconType="cap-icon-alternative-post"
					@tocheckBoxChange="oncheckBoxChange"
					@toCheckValueClickProp="oncheckBoxChange"
				/>
			</template>
		</top-bottom-layout>
	</div>
</template>

<script>
import scrollList from '@/components/scrollList';
import topBottomLayout from '@/components/topBottomLayout';
import businessAccountList from '@/components/businessAccountList';

import {BtnType, Dialog} from '@/components/dialog';

import {mapActions, mapState} from 'vuex';
import {ACTION_ADD_ENTITY, ACTION_REMOVE_ENTITY} from '@/store/actionTypes';

export default {
	name: 'Node',
	components: {
		scrollList,
		topBottomLayout,
		businessAccountList
	},
	inject: ['app'],
	data() {
		return {
			searchValue: '',
			selectAccountId: '',
			nodeId: '',
			orgId: '',
			roleFirstLoad: false,
			listSearchCondition: {},
			listTitleProps: {},
			roleOtherProps: [],
			roleTitleProps: { nodeName: '节点名称' }
		};
	},
	computed: {
		...mapState('selectData', ['selectedUUIDMap'])
	},
	beforeMount() {
		const { defaultAccountId, extParameters } = this.app().orgSelect;
		this.selectAccountId = defaultAccountId;
		this.listSearchCondition = {
			accountId: this.selectAccountId,
			keyword: this.searchValue,
			extParameters: extParameters,
			businessAccountId: defaultAccountId
		};
	},
	mounted() {
		setTimeout(() => {
			const { defaultAccountId } = this.app().orgSelect;
			this.orgId = defaultAccountId;
		}, 300);
	},
	methods: {
		...mapActions('selectData', [ACTION_ADD_ENTITY, ACTION_REMOVE_ENTITY]),
		initProps() {
			this.searchValue = '';
			this.nodeId = '';
			this.roleFirstLoad = false;
		},
		onChangeAccount(ret) {
			this.initProps();
			this.$refs.roleList.initProps(); // 人员清空
			this.selectAccountId = ret.id;
			this.listSearchHandle();
		},
		listSearchHandle() {
			const { extParameters } = this.app().orgSelect;
			this.$refs.list.search({
				accountId: this.selectAccountId,
				extParameters: extParameters,
				businessAccountId: this.orgId
			});
		},
		selectAccountIdChangeHandle(value) {
			this.initProps();
			this.$refs.roleList.initProps(); // 人员清空
			this.listSearchHandle();
		},
		getListValueClickPropHandle(value) {
			this.nodeId = value.id;
			this.roleSearchHandle();
		},
		roleSearchHandle() {
			const { extParameters } = this.app().orgSelect;
			this.roleFirstLoad = true;
			this.$refs.roleList.search({
				nodeId: this.nodeId,
				accountId: this.selectAccountId,
				extParameters: extParameters,
				businessAccountId: this.orgId,
				keyword: this.searchValue
			});
		},
		async oncheckBoxChange(data) {
			console.log('oncheckBoxChange==>data', data);
			let nodeList = data;
			if (!(data instanceof Array)) {
				nodeList = [data];
			}
			let entity = nodeList[0];
			let isDeptMember = entity.id;
			let name = entity.name;
			let key = entity.type + '|' + entity.id;
			let checked = this.selectedUUIDMap[key];
			if (isDeptMember.endsWith('DeptMember') && !checked) {
				let res = await Dialog.confirm({ msg: `“${name}”是否包含子部门？`, okText: '包含', cancelText: '不包含' });
				if (res === BtnType.OK) {
					this[ACTION_ADD_ENTITY]({ entities: nodeList, notIncludeSubDept: [] });
				}
				if (res === BtnType.CANCEL) {
					this[ACTION_ADD_ENTITY]({ entities: nodeList, notIncludeSubDept: [entity.id] });
				}
			} else {
				this.selectDataToRight(nodeList);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
</style>
